<script lang="ts" setup>
  import { ref, watch } from 'vue'
  import { CodeScanSetData } from '../../../types'
  import _ from 'lodash'

  const props = defineProps<{
    sets: Array<CodeScanSetData>
  }>()

  const emits = defineEmits<{
    (e: 'update', value: Array<CodeScanSetData>): void
  }>()

  const sets = ref<Array<CodeScanSetData>>([])

  // 产品信息移除之后信息保存的数组
  const removedProductInfos = ref<Array<number>>([])

  // 从数组中移除指定元素
  const removeFromArr = (arr: Array<any>, index: number) => {
    const result = arr.splice(index, 1)
    return result[0]
  }

  // 清空数组
  const clearArr = (arr: Array<any>) => {
    arr.length = 0
  }

  // 添加产品信息事件
  const handleAddProductInfo = (index: number, productIndex: number) => {
    const info = removeFromArr(removedProductInfos.value, productIndex)
    ;(sets.value[index].val as Array<number>).push(info)
    sendUpdate()
  }

  // 获取产品信息名称
  const getProductInfoName = (type: number) => {
    let result = ''
    switch (type) {
      case 1:
        result = '商品品牌'
        break
      case 2:
        result = '商品分类'
        break
      case 3:
        result = '商品名称'
        break
      default:
        result = '商品型号'
    }
    return result
  }

  // 添加全部产品信息
  const handleAddAllProductInfo = (index: number) => {
    ;(sets.value[index].val as Array<number>) = [
      ...removedProductInfos.value,
      ...(sets.value[index].val as Array<number>),
    ]
    clearArr(removedProductInfos.value)
    sendUpdate()
  }

  // 移除产品信息事件
  const handleRemoveProductInfo = (index: number, productIndex: number) => {
    const info = removeFromArr(sets.value[index].val as Array<number>, productIndex)
    removedProductInfos.value.push(info)
    sendUpdate()
  }

  // 清除产品信息
  const handleClearProductInfo = (index: number) => {
    removedProductInfos.value = [
      ...removedProductInfos.value,
      ...(sets.value[index].val as Array<number>),
    ]
    clearArr(sets.value[index].val as Array<number>)
    sendUpdate()
  }

  // 按钮取消聚焦事件
  const btnCancelFocus = (e: Event) => {
    ;(e.target as HTMLButtonElement).blur()
  }

  // 恢复为默认
  const restoreDefault = () => {
    clearArr(removedProductInfos.value)
    sets.value.forEach((set) => {
      if (set.dataType === 1) {
        const val = set.val as Array<number>
        if (!val.includes(1)) {
          removedProductInfos.value.push(1)
        }

        if (!val.includes(2)) {
          removedProductInfos.value.push(2)
        }

        if (!val.includes(3)) {
          removedProductInfos.value.push(3)
        }

        if (!val.includes(4)) {
          removedProductInfos.value.push(4)
        }
      }
    })
  }

  // 通知父组件更新
  const sendUpdate = () => {
    emits('update', _.cloneDeep(sets.value))
  }

  watch(
    () => props.sets,
    (value) => {
      sets.value = _.cloneDeep(value)
      restoreDefault()
    },
    { deep: true, immediate: true },
  )

  defineExpose({
    restoreDefault,
  })
</script>

<template>
  <div>
    <template v-for="(set, index) in sets" :key="set.name">
      <!-- 商品信息 -->
      <template v-if="set.dataType === 1">
        <el-card shadow="never" class="mt-10">
          <div class="flex-justify-between" style="height: 32px">
            <div class="flex gap-10">
              <div
                v-for="(product, productIndex) in removedProductInfos"
                :key="product"
                class="right_top_hot_dot_father"
              >
                <span
                  class="product_info_remove"
                  @click="handleAddProductInfo(index, productIndex)"
                >
                  {{ getProductInfoName(product) }}
                </span>
                <div class="right_top_hot_dot_child">+</div>
              </div>
            </div>
            <el-button
              link
              type="primary"
              @click="handleAddAllProductInfo(index)"
              @focus="btnCancelFocus"
              >添加全部
            </el-button>
          </div>
        </el-card>
        <el-card shadow="never" class="mt-10">
          <div class="flex-justify-between">
            <div class="flex gap-10">
              <div
                v-for="(product, productIndex) in set.val"
                :key="product"
                class="right_top_hot_dot_father"
              >
                <span
                  class="product_info_add"
                  @click="handleRemoveProductInfo(index, productIndex)"
                >
                  {{ getProductInfoName(product as number) }}
                </span>
                <div class="right_top_hot_dot_child">-</div>
              </div>
            </div>
            <div style="display: flex; align-items: center; gap: 10px">
              <el-button
                link
                type="danger"
                @click="handleClearProductInfo(index)"
                @focus="btnCancelFocus"
                >清除
              </el-button>
              <div style="display: flex; align-items: center; gap: 5px">
                <el-switch v-model="set.show" @change="sendUpdate" />
                <span v-if="set.show">显示</span>
                <span v-else>隐藏</span>
              </div>
            </div>
          </div>
        </el-card>
      </template>

      <!--商品规格、商品货号-->
      <div v-if="[2, 3, 4].includes(set.dataType)" class="mt-10">
        <el-card class="mt-10" shadow="never">
          <div class="flex-justify-between">
            <div>{{ set.name }}</div>
            <div class="flex-center-5">
              <el-switch v-model="set.show" @change="sendUpdate"></el-switch>
              <span v-if="set.show">显示</span>
              <span v-else>隐藏</span>
            </div>
          </div>
        </el-card>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
  :deep(.el-card__body) {
    padding: 8px;
  }

  .mt-10 {
    margin-bottom: 10px;
  }

  .product_info_add {
    background: #007cff;
    border-radius: 4px;
    padding: 5px;
    font-size: 12px;
    color: #fff;
    border: 1px solid $primaryColor;
  }

  .flex-center-5 {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .product_info_remove {
    background-color: rgba($primaryColor, 0.2);
    border: 1px solid rgba($primaryColor, 0.8);
    color: $primaryColor;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
  }
</style>
